<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>个人中心</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/sm.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/sm-extend.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/module.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/base.css">
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_961uouwh7c9b2o6r.css">
    <style>
        .card {
            margin: 0;
        }
        .header-card {
            border-bottom: 0;
        }
        .arrow{
            position: absolute;
            top:50%;
            right: 15px;
            content: '';
            display: block;
            width: 8px;
            height: 16px;
            transform: translateY(-50%);
        }
        .footer-bar{
            z-index: 1;
        }
        .expand{
            display: none;
            position: fixed;
            z-index: 2;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        .callme{
            display: none;
            position: fixed;
            z-index: 3;
            top: 38%;
            left: 20%;
            width: 60%;
            height: 25%;
            border-radius: 5px;
            background-color: #fff;

        }
        .callme .pic{
            position: relative;
            top: -30px;
            left: 38%;
            width: 60px;
            height: 60px;
        }
        .callme .information-box{

            max-width: 150px;
            margin: -20px auto;
        }
        .callme .information-box h1{
            font-size: 12px;
            color: #666666;
            font-weight: normal;
            white-space: nowrap;
            margin-bottom: 5px;
            text-align: left;
        }
        .callme .information-box h1:before{
            content: '';
            display: inline-block;
            padding: 3px;
            margin-right: 5px;
            border-radius: 50%;
            background-color: #999999;
        }
        .callme .information-box .btn{
            display: block;
            border:none;
            margin: 15px auto 15px;
            height: 34px;
            line-height: 34px;
            width: 120px;
            border-radius: 6px;
            background-color: #86bb07;
            text-align: center;
            color: #fff;
            font-size: 14px;
        }
        /*二维码*/
        .modal {  width: 14rem;  margin-top: -40% !important;  margin-left: -7rem;  }
               .img-div {  height: 50px; margin: 0; }
               .modal-inner {  background: #FFFFFF;  padding: 0.65rem;  }
               .organize-item .img-box, .organize-item .item-inner {  float: left;  }
               .organize-item .item-inner {  line-height: 50px;  margin-left: 0.5rem;  }
               .organize-item .item-inner .item-title {  font-size: 14px;  }
               .qr-code {  width: 240px;  }
               .list-block .information-item-content {  padding: 0 0.75rem;  }
               .info-list p {  font-size: 14px;  }
                .header{border-radius: 50%;
                    border: 2px solid rgba(171,171,171,0.5);
                }
        .modal-inner .code-text{
            margin-top: 5px;
            display: block;
            text-align: center;
            font-size: 14px;
        }

    </style>
</head>

<body>
<div class="page">
    <!--头部部分 !-->
    <div class="content person-content" id="person-content">
        <div class="card header-card">
            <img src="${staticpath}/front/dist/images/bg.png" class="img-bg">
            <img src="${staticpath}/front/dist/images/code.png"  class="weChat-img" id="user-qrCode">

            <div class="account-div" data-url="${basepath}/rest/front/user/toUserInfo">

            </div>
        </div>
        <!--订单 !-->
        <div class="info-list" id="orderBlock">
            <div class="nlist-block">
                <a href="${basepath}/rest/front/order/toOrderList?status=init">
                    <div class="img-wrap">
                        <img src="${staticpath}/front/dist/images/payment.png" alt="待付款" width="26" height="26"/>
                    </div>
                    <p>待付款</p>
                </a>
                <a href="${basepath}/rest/front/order/toOrderList?status=pass">
                    <div class="img-wrap">
                        <img src="${staticpath}/front/dist/images/send.png" alt="待发货" width="26"/>
                    </div>
                    <p>待发货</p>
                </a>
                <a href="${basepath}/rest/front/order/toOrderList?status=send">
                    <div class="img-wrap">
                        <img src="${staticpath}/front/dist/images/receipt.png" alt="待收货" width="26"/>
                    </div>
                    <p>待收货</p>
                </a>
                <a href="${basepath}/rest/front/order/toOrderList?status=finish">
                    <div class="img-wrap">
                        <img src="${staticpath}/front/dist/images/complete.png" alt="已完成" width="26" height="26"/>
                    </div>
                    <p>已完成</p>
                </a>
            </div>
        </div>
        <div class="info-div">
            <ul>
                <li style="margin-bottom: 16px;">
                    <a class="list-item" href="${basepath}/rest/front/order/toOrderList">
                <span class="list-icon">
                    <img src="${staticpath}/front/dist/images/allOrder.png">
                </span>
                <span>
                    全部订单
                </span>

                        <div class="list-right"></div>
                        <img src="${staticpath}/front/dist/images/right.png" class="arrow" alt="">
                    </a>
                </li>
                <li>
                    <a class="list-item" href="${basepath}/rest/front/address/toAddressList">
                <span class="list-icon">
                    <img src="${staticpath}/front/dist/images/address.png"  style="width: 24px; height:24px; ">
                </span>
                <span>
                    地址管理
                </span>

                        <div class="list-right"></div>
                        <img src="${staticpath}/front/dist/images/right.png" class="arrow" alt="">
                    </a>
                </li>
                <li>
                    <a class="list-item" href="${basepath}/rest/front/user/toSubList">
                <span class="list-icon">
                    <img src="${staticpath}/front/dist/images/phone.png" style="width: 18px; height:20px; ">
                </span>
                <span>
                    通讯录
                </span>
                        <div class="list-right"></div>
                        <img src="${staticpath}/front/dist/images/right.png" class="arrow" alt="">
                    </a>
                </li>
                <li class="serviceBtn">
                    <a class="list-item">
                <span class="list-icon">
                    <img src="${staticpath}/front/dist/images/service.png">
                </span>
                <span>
                    联系客服
                </span>

                        <div class="list-right"></div>
                        <img src="${staticpath}/front/dist/images/right.png" class="arrow" alt="">
                    </a>
                </li>
                <li>
                    <a class="list-item" href="${basepath}/rest/front/user/toIntroduce">
                <span class="list-icon">
                    <img src="${staticpath}/front/dist/images/our.png">
                </span>
                <span>
                    关于我们
                </span>

                        <div class="list-right"></div>
                        <img src="${staticpath}/front/dist/images/right.png" class="arrow" alt="">
                    </a>
                </li>
                <li>
                    <a class="list-item" style="border-bottom: 0;" href="${basepath}/rest/front/wallet/toWalletList">
                <span class="list-icon">
                    <img src="${staticpath}/front/dist/images/cash.png"  style="width: 18px; height:18px;">
                </span>
                <span>
                    提现
                </span>

                        <div class="list-right"></div>
                        <img src="${staticpath}/front/dist/images/right.png" class="arrow" alt="">
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 工具栏 -->
    <nav class="footer-bar bar bar-tab">
        <a class="tab-item external" href="${basepath}/rest/front/product/toProductList">
            <img src="${staticpath}/front/dist/images/shangcheng.png">

            <p class="tab-label">商城</p>
        </a>
        <a class="tab-item external" href="${basepath}/rest/front/news/toNewsList">
            <img src="${staticpath}/front/dist/images/chart.png">

            <p class="tab-label">资讯</p>
        </a>
        <a class="tab-item external" href="${basepath}/rest/front/product/toAbout">
            <img src="${staticpath}/front/dist/images/eye.png">

            <p class="tab-label">发现</p>
        </a>
        <a class="tab-item external active" href="${basepath}/rest/front/user/toMyPage">
            <img src="${staticpath}/front/dist/images/user1.png">

            <p class="tab-label">我的</p>
        </a>
    </nav>
    <div class="expand"></div>
    <div class="callme">
        <img alt="" class="pic" src="${staticpath}/front/dist/images/header.png">
        <div class="information-box">
            <h1>
                联系电话： 15980808080
            </h1>
            <h1>
                联系Q  Q ：410000000
            </h1>
            <button class="btn">
                关闭
            </button>
        </div>
        </img>
    </div>
</div>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/zepto.js' charset='utf-8'></script>
<script>
    $.config = {
        router: false
    }
</script>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/sm.js' charset='utf-8'></script>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/sm-extend.js' charset='utf-8'></script>
<script type='text/javascript' src='${staticpath}/front/dist/js/account/qrCode.js' charset='utf-8'></script>
<script>
    var headImg="";
$.ajax({
        type: "GET",
//        url: "/rest/front/user/selectDetail",
        url: "/rest/front/user/selectUser",
        dataType: "json",
//        data:{
//            id:197
//        },
        success: function (data) {
            var userHtml = "";
            userHtml += '<img src="' + data.data.icon + '" width="80" class="head-img"><h4>' + data.data.nickname + '</h4>';
            $(".account-div").html(userHtml);
        }
    });
    //点击头像跳转个人信息
    $(document).on('click', '.head-img', function () {
           window.location.href=$(".account-div").attr('data-url');
       });
    //点击客服，弹出客服信息
    $(".serviceBtn").click(function(){
        $(".expand,.callme").show();
    });
    $(".btn,.expand").click(function () {
        $(".expand,.callme").hide();
    });
    $.init();
</script>
</body>

</html>
